<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贷款产品详情</title>
    <link href="../static/layui-v2.9.1/layui/css/layui.css" rel="stylesheet">
    <script src="../static/layui-v2.9.1/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/css/footer.css">
    <link rel="stylesheet" href="../static/framework/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/framework/reset.css">
    <link rel="stylesheet" href="../static/bootstrap-5.3.0-dist/css/bootstrap.min.css">
    <script src="../static/bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        table {
            overflow-y: auto;
            border-collapse: collapse;
            width: 100%;
            margin-top: 100px;
        }
        .buy-button:hover {
            background-color: #218838;
        }
        .buy-button {
            display: block;
            width: 200px; /* 修改按钮宽度为200px */
            margin: 20px auto;
            padding: 10px 0;
            background-color: #28a745;
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            float: right; /* 添加浮动属性，使按钮靠右对齐 */
        }
        .header {
            position: fixed;
            /* 固定在页面顶部 */
            top: 0;
            /* 对齐到顶部 */
            left: 50%;
            /* 将左边缘移动到页面中间 */
            transform: translateX(-50%);
            /* 将元素水平居中 */
            background-color: #007bff;
            /* 背景颜色 */
            color: white;
            /* 文字颜色 */
            width: 100%;
            /* 宽度 */
            text-align: center;
            /* 文本居中 */
            padding: 1em 0;
            /* 上下内边距 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
            z-index: 1000;
            /* 确保在顶层 */
            display: flex;

        }

        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        /* 模态框样式 */
        .modal {
            display: none; /* 隐藏模态框 */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fefefe;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }




        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .d-cen1 {
            margin-bottom: 10px;
        }

        .submit {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }

        .submit:hover {
            background-color: #218838;
        }
        .modal-content{
            border-radius: 10px;
        }
        .h-title{
            display: flex;
            justify-content: center;
        }


    </style>
</head>
<body>
    <div class="header">
        <i class="fa fa-angle-left fa-2x" onclick="location.href='/loanProduct'"
           style="font-size: 20px;margin-top: 10px;">返回</i>
        <h1 style="margin: auto;">产品详细信息</h1>
        <p style="margin-right: 46.84px;"></p>
    </div>
    <table>

        <tr>
            <td>产品名称</td>
            <td id="productName" th:text="${session.loanProduct.productName}">产品A</td>
        </tr>

        <tr>
            <td>贷款起始日期</td>
            <td id="beginDate" th:text="${session.loanProduct.beginDate}">2024-01-01</td>
        </tr>

        <tr>
            <td>贷款期限</td>
            <td id="timeContinue" th:text="${session.loanProduct.timeContinue}">5年</td>
        </tr>

        <tr th:switch="${session.loanProduct.incomeType}">
            <td>贷款类型</td>
            <td th:case="1">等额本金</td>
            <td th:case="2">等额本息</td>
        </tr>

        <tr>
            <td>利率</td>
            <td id="loanRate" th:text="${session.loanProduct.loanRate}">5%</td>
        </tr>

    </table>

    <button class="buy-button" id="button">立即申请</button>

    <!-- 模态框 -->
    <div id="productModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 class="h-title">申请贷款</h2>
            <form id="purchaseForm" action="/loan/insertUP" method="post">
                <input type="hidden" name="productId" th:value="${session.loanProduct.id}">
                <input type="hidden" name="timeContinue" th:value="${session.loanProduct.timeContinue}">
                <input type="hidden" name="loanRate" th:value="${session.loanProduct.loanRate}">
               <div class="d-cen1"><label>产品名称：</label><input type="text" name="productName" th:value="${session.loanProduct.productName}" readonly></div>
               <div class="d-cen1"><label>贷款月数：</label><input type="text" th:value="${session.loanProduct.timeContinue}" readonly></div>
               <div class="d-cen1"><label>产品利率：</label><input type="text" th:value="${session.loanProduct.loanRate}" readonly></div>
                <div class="d-cen1"><label>贷款金额：</label><input style="border: 1px solid #ccc;" type="text" name="balance" required></div>
                <div class="d-cen1"><button type="submit" class="submit">确认申请</button></div>
            </form>
</div>
</div>

</body>
<script>    
    // JavaScript代码
    
        // 获取模态框
        var modal = document.getElementById("productModal");
    
        // 获取按钮
        var btn = document.getElementById("button");
    
        // 获取 <span> 元素，关闭模态框
        var span = document.getElementsByClassName("close")[0];
    
        // 点击按钮打开模态框
        btn.onclick = function() {
            modal.style.display = "block";
        }
    
        // 点击 <span> (x) 关闭模态框
        span.onclick = function() {
            modal.style.display = "none";
        }
    
        // 点击模态框外部关闭模态框
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    
        // 处理表单提交
        function handlePurchase(event) {
            event.preventDefault();
            var form = document.getElementById("purchaseForm");
            var purchaseAmount = form.purchaseAmount.value;
    
            alert("申请金额：" + purchaseAmount);
            // 可以在这里添加进一步的购买处理逻辑，例如发送请求到服务器
    
            // 关闭模态框
            modal.style.display = "none";
        }
        </script>
</html>